<template>
  <el-dialog
    title="查看限流配置"
    :visible.sync="visible"
    width="50%"
    top="10vh"
    :before-close="closeDialogHandle"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-form ref="limitConfigForm" label-width="110px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="接口路径">
            <el-input v-model="limitConfig.requestKey" readonly class="width90percent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="限流类型">
            <el-input :value="limitConfig.type | baseFormat(typeEnumList)" readonly class="width90percent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="时间数值">
            <el-input v-model="limitConfig.timeNum" readonly class="width90percent">
              <template slot="append">{{ limitConfig.timeType | baseFormat(timeTypeEnumList) }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="滑动窗口数量">
            <el-input v-model="limitConfig.windowNum" readonly class="width90percent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="最大次数">
            <el-input v-model="limitConfig.maxNum" readonly class="width90percent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="限流时长">
            <el-input v-model="limitConfig.limitTime" readonly class="width90percent">
              <template slot="append">秒</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="限流回复消息">
            <el-input v-model="limitConfig.message" readonly class="width90percent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-input :value="limitConfig.status | baseFormat(statusEnumList)" readonly class="width90percent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-show="limitConfig.status === useStatus">
        <el-divider content-position="center">限流监控</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="窗口间隔">
              <el-input v-model="limitConfig.windowSpace" readonly class="width90percent">
                <template slot="append">毫秒</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="窗口时间">
              <el-input v-model="limitConfig.windowTime" readonly class="width90percent"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="当前请求总数">
              <el-input v-model="limitConfig.totalCount" readonly class="width90percent"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="" label-width="30px">
              <el-checkbox v-model="refreshFlag" @change="changeRefreshFlagHandle">实时刷新统计</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="滑动窗口">
          <el-tag v-for="(num, index) in limitConfig.slideWindow" :key="'count' + index" class="ml10">{{ num }}</el-tag>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialogHandle">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "limit-config-view-dialog",
    props: {
      // 限流类型枚举列表
      typeEnumList: {
        type: Array,
        default: () => []
      },
      // 时间枚举列表
      timeTypeEnumList: {
        type: Array,
        default: () => []
      },
      // 状态枚举列表
      statusEnumList: {
        type: Array,
        default: () => []
      },
      // 状态为’可用‘的枚举值
      useStatus: {
        type: Number,
        default: undefined
      }
    },
    data() {
      return {
        // 弹出框显示状态[true-显示 false-关闭]
        visible: false,
        // 限流配置对象
        limitConfig: {
          // 接口路径
          requestKey: undefined,
          // 限流类型[0-请求 1-异常]
          type: undefined,
          // 时间数值
          timeNum: undefined,
          // 时间单位[0-秒 1-分 2-时 3-日 4-月 5-年]
          timeType: undefined,
          // 滑动窗口数量
          windowNum: undefined,
          // 最大次数
          maxNum: undefined,
          // 限流时长（秒）
          limitTime: undefined,
          // 限流回复消息
          message: undefined,
          // 版本号
          version: undefined,
          // 状态[0-可用 1-不可用]
          status: undefined,
          // 窗口间隔（单位：毫秒）
          windowSpace: undefined,
          // 第一个窗口对应的时间
          windowTime: undefined,
          // 当前请求总数
          totalCount: undefined,
          // 滑动窗口
          slideWindow: undefined,
        },
        // 实时刷新限流统计数据状态[true-开启 false-关闭]
        refreshFlag: true,
        // 实时刷新限流统计数据定时器
        refreshTimer: undefined,
      }
    },
    filters: {
      /**
       * 枚举映射方法
       * @param {number} value 参数值
       * @param {Array} list  枚举列表
       */
      baseFormat(value, list) {
        for (let obj of list) {
          if (obj.value === value) {
            return obj.name;
          }
        }
        return '未知';
      }
    },
    methods: {
      /**
       * 初始化弹出框方法
       * @param {Object} limitConfig 限流配置对象
       */
      initDialog(limitConfig) {
        let _limitConfig = this.limitConfig;
        for (let propKey in _limitConfig) {
          if (limitConfig.hasOwnProperty(propKey)) {
            _limitConfig[propKey] = limitConfig[propKey];
          }
        }

        this.visible = true;

        if (_limitConfig.status === this.useStatus) {
          // 获取限流统计数据
          this.getLimitStats(_limitConfig.requestKey, _limitConfig.type);
          // this.changeRefreshFlagHandle(true);
        }
      },
      /**
       * 获取限流统计数据方法
       * @param {string} requestKey 接口路径
       * @param {number} type       限流类型
       */
      getLimitStats(requestKey, type) {
        this.$axios.$get('/sys/limit-config/stats', { params: { requestKey, type}})
          .then(({ data }) => {
            let _limitConfig = this.limitConfig;
            _limitConfig.windowSpace = data.windowSpace;
            _limitConfig.windowTime = data.windowTime;
            _limitConfig.totalCount = data.totalCount;
            _limitConfig.slideWindow = data.slideWindow;
          })
          .catch(() => {})
      },
      /**
       * 实时刷新限流统计数据状态切换事件
       * @param {boolean} refreshFlag 实时刷新限流统计数据状态
       */
      changeRefreshFlagHandle(refreshFlag) {
        if (refreshFlag) {
          this.refreshTimer = setInterval(() => {
            let _limitConfig = this.limitConfig;
            this.getLimitStats(_limitConfig.requestKey, _limitConfig.type);
          }, 1000)
        } else {
          // 清理定时器
          clearInterval(this.refreshTimer);
          this.refreshTimer = undefined;
        }
      },
      /**
       * 关闭弹出框方法
       */
      closeDialogHandle() {
        this.visible = false;
        // 重置表单
        let _limitConfig = this.limitConfig;
        for (let propKey in _limitConfig) {
          _limitConfig[propKey] = undefined;
        }
        this.refreshFlag = true;
        // 清理定时器
        clearInterval(this.refreshTimer);
        this.refreshTimer = undefined;
      }
    }
  }
</script>

<style scoped>
  .width50percent {
    width: 55%;
  }
  .refresh-time {
    margin-left: 12px;
    width: 63%;
  }
  .width90percent {
    width: 90%;
  }
</style>
